<template>
  <div class="admin">
    <!-- 查询 -->
    <SearchModule @reset="formLabelAlign.keyword = ''" @search="searchFn">
      <template #main>
        <el-form
          label-width="100px"
          :model="formLabelAlign"
          style="max-width: 460px"
        >
          <el-form-item label="账号/姓名:">
            <el-input
              v-model="formLabelAlign.keyword"
              placeholder="请输入账号/姓名"
            />
          </el-form-item>
        </el-form>
      </template>
    </SearchModule>
    <!-- 添加 -->
    <card title="数据列表" btn-text="添加" v-permisstion="'addUser'" @btnFn="addUserFn" />
    <!-- 表格 -->
    <el-container>
      <el-main>
        <el-table :data="userList" border style="width: 100%">
          <el-table-column align="center" prop="id" label="编号" width="80px" />
          <el-table-column
            align="center"
            prop="username"
            label="账号"
            width="270"
          />
          <el-table-column align="center" prop="nickName" label="姓名" />
          <el-table-column align="center" prop="email" label="邮箱" width="" />
          <el-table-column align="center" prop="createTime" label="添加时间">
            <template #default="{ row }">
              {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="loginTime" label="最后登录">
            <template #default="{ row }">
              {{
                row.loginTime
                  ? dayjs(row.loginTime).format("YYYY-MM-DD HH:mm:ss")
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否禁用">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="Fn(scope)"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="操作"
            width="250"
          >
            <template #default="{ row }">
              <el-button text @click="userEditor(row.id)" type="primary" v-permisstion="'editUser'"
                >编辑用户</el-button
              >
              <el-button text @click="distributionFn(row.id)" type="primary" v-permisstion="'allocRole'"
                >分配角色</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="paginationParams.currentPage4"
      v-model:page-size="paginationParams.pageSize4"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :background="true"
      :total="paginationParams.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 角色设置模态框 -->
    <allocation
      v-if="distributionModulShow"
      @cancel="distributionModulShow = false"
      :distributionModulShow="distributionModulShow"
      :value="distribution"
      :options="options"
      @myconfirm="myconfirm"
    />
    <!-- 添加模态框 -->
    <AddDialog
      :addModulShoe="addModulShoe"
      :admin="Admin"
      :addModulState="addModulState"
      @cancel="addModulShoe = false"
      @myconfirm="myconfirmFn"
      @restore="addModulState = -1"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, Ref } from "vue";
import card from "@/components/MyCard/index.vue";
import allocation from "@/components/allocation.vue";
import * as http from "./api/http";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { useTableFn } from "@/hooks/component/useTable";
import SearchModule from "@/components/SearchModule.vue";
import AddDialog from "@/components/AddDialog.vue";

// 搜索参数
const formLabelAlign = reactive({
  keyword: "",
});

// 列表数据/分页器
let {
  userList,
  paginationParams,
  handleSizeChange,
  handleCurrentChange,
  queryList,
} = useTableFn(http.admin.AdminList, formLabelAlign);

// (添加、编辑)用户
const Admin: Ref<IAddPaylaod> = ref({});
// 添加请求
const addFn = async (val: IAddPaylaod) => {
  let res = await http.admin.AdminRegister(val);
  console.log(res);
  if (res.code == 200) {
    // 重新获取列表数据
    queryList();
    // 提示
    ElMessage.success(res.message);
  } else {
    ElMessage.error(res.message);
  }
};
// 编辑请求
const EditorFn = async (val: IAddPaylaod) => {
  console.log("编辑事件", val);
  let res = await http.admin.AdminUpdate(val.id!, val);
  console.log(res);
  if(res.code==200){
    ElMessage.success(res.message)
  }else{
    ElMessage.error(res.message)
  }
  
};
const addModulShoe: Ref<boolean> = ref(false);
const addModulState = ref(-1); //添加为1，修改为0
const myconfirmFn = async (val: IAddPaylaod) => {
  console.log(val);
  if (addModulState.value === 1) {
    // 添加
    addFn(val);
  } else {
    // 编辑
    EditorFn(val);
  }
  // 重新发送列表请求
  queryList();
  // 关闭模态框
  addModulShoe.value = false;
};

// 添加事件
const addUserFn = () => {
  // 修改为添加状态
  addModulState.value = 1;
  // 显示modul
  addModulShoe.value = true;
};
// 编辑事件
const userEditor = async (id: number) => {
  // 请求个人信息
  let res = await http.admin.getAdmin(id);
  // 数据赋值回显
  Admin.value = res.data;
  // 修改为编辑状态
  addModulState.value = 0;
  // 显示modul
  addModulShoe.value = true;
};

// 状态切换功能
const Fn = async (val: any) => {
  console.log(val);
  console.log(val.row.id);
  console.log(val.row.status);
  let res = await http.admin.UpdateStatus(val.row.id, val.row.status);
  if (res.code == 200) {
    ElMessage.success("状态修改成功!");
  }
};


// 搜索功能
const searchFn = () => {
  console.log(formLabelAlign.keyword);
  // 发送请求
  queryList();
};

// 所有角色
const options = ref([]);
onMounted(async () => {
  let res = await http.admin.RoleListAll();
  console.log(res);
  options.value = res.data;
});

// 获取指定用户的角色
const distribution: Ref<number[]> = ref([]);
// 当前用户id
const userId = ref();
const distributionFn = async (id: number) => {
  console.log(id);
  userId.value = id;
  let res = await http.admin.AdminRole(id);
  if (res.code == 200) {
    distribution.value = res.data.map((item) => item.id);
    console.log(distribution.value);
    // 显示
    distributionModulShow.value = true;
  }
};
// 角色设置模态框显示/隐藏
const distributionModulShow = ref(false);
// 指定用户确认事件
const myconfirm = async (val: any) => {
  console.log("修改用户角色", val);
  let res = await http.admin.AdminRoleUpdate({
    adminId: userId.value,
    roleIds: val.join(","),
  });
  if (res.code == 200) {
    // 关闭模态框
    distributionModulShow.value = false;
    ElMessage.success(res.message);
  }
};
</script>

<style lang="less" scoped>
.admin {
  box-sizing: border-box;

  .btn {
    :deep(.el-button) {
      font-size: 12px;
    }
  }
  .add {
    // height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .add-title {
      padding-left: 10px;
      font-size: 14px;
    }
  }
}
:deep(.el-container) {
  padding: 20px 0;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
:deep(.el-header) {
  height: 40px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
}
:deep(.el-container.aaa) {
  margin: 20px 0;
  padding: 0 !important;
}
:deep(.el-main.add) {
  padding: 20px !important;
}
:deep(.el-icon) {
  vertical-align: middle;
}
:deep(.el-table_1_column_1) {
  font-size: 12px;
}
:deep(.el-table__cell) {
  font-size: 12px;
}
:deep(.el-pagination) {
  float: right;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
